<template>
	<view class="wrap">
		<view class="title">{{post.title}}</view>
		<view class="user">
			<view class="user_pic">
				<image :src="post.uid.pic"></image>
			</view>
			<view class="user_info">
				<view class="nickname">{{post.uid.nickname}}</view>
				<view class="other">
					<view class="info">
						<u-tag
							type="error" 
							size="mini" 
							:text="'VIP'+post.uid.isVip" 
							:show="post.uid.isVip!=='0'"></u-tag>
					</view>
					<text class="created info">{{post.created|date}}</text>
					<view class="info">
						<u-tag 
							type="warning" 
							size="mini" 
							:text="post.tag"
							:show="isShow"></u-tag>
					</view>
					<text class="iconfont icon-linedesign-14 info">{{post.reads}}</text>
					<text class="iconfont icon-chakantiezihuifu info">{{post.answer}}</text>
				</view>
			</view>
		</view>
		<view class="postDetail">
			<u-parse :content="post.content"></u-parse>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			post:{
				type:Object,
				default(){
					return {}
				}
			}
		},
		computed:{
			isShow(){
				if(typeof this.post.tag !== 'undefined' && this.post.tag !== null){
					return true
				}else {
					return false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.wrap{
	padding: 0 20rpx;
	box-sizing: border-box;
	.title{
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;
		color: #444444;
	}
	.user{
		width: 100%;
		height: 160rpx;
		display: flex;
		&_pic{
			width: 160rpx;
			height: 160rpx;
			padding: 20rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
			image{
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
		&_info{
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.nickname{
				height: 80rpx;
				line-height: 80rpx;
				font-size: 24rpx;
			}
			.other{
				display: flex;
				align-items: center;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 24rpx;
				.info{
					margin-right: 20rpx;
					font-size: 24rpx;
				}
			}
		}
	}
	.postDetail{
		min-height: 620rpx;
		background-color: rgba(31, 182, 131,0.2);
		border-radius: 10rpx;
		font-size: 24rpx;
	}
}
</style>
